<template>
  <div class="leftPop" ref="drags" @mousedown="moudedown">
    <!-- 标题 -->
    <div class="top">
      <div class="top_1">事件确认
        <!-- 图标 -->
        <div class="left_icon" @click="closePop()">
          <n-icon size="18px" color="#fff">
            <CloseSharp></CloseSharp>
          </n-icon>
        </div>
      </div>
    </div>
    <!-- 虚线 -->
    <div class="center"></div>
    <!-- 单选 -->
    <div class="radioStyle">
      确认状态:
      <div class="radioStyle_2">
        <n-space>
          <n-radio :checked="checkedValue == '有效'" value="有效" name="basic-demo" @change="handleChange">
            有效
          </n-radio>
          <n-radio :checked="checkedValue == '无效'" value="无效" name="basic-demo" @change="handleChange">
            无效
          </n-radio>
        </n-space>
      </div>
    </div>
    <!-- 处理人员 -->
    <div class="handlePeo">
      处理人员:
      <button class="handlePeo_1" @click="addPeople">添加人员</button>
    </div>
    <!-- table表格 -->
    <table border="1" class="tableStyle">
      <tr>
        <th>人员名称</th>
        <th>部门名称</th>
        <th>手机</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in mainStore.selected" :key="item.id">
        <td>{{ item.itemValue }}</td>
        <td>安保一部</td>
        <td>13545991844</td>
        <td>移除</td>
      </tr>
    </table>
    <!-- 按钮 -->
    <div class="bottomStyle">
      <button class="bottomStyle_1" @click="onCloseAlarm()">取消</button>
      <button class="bottomStyle_2" @click="sureAlarm()">确认</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CloseSharp } from "@vicons/ionicons5";
import { useMainStore } from "../../store/index"
let mainStore: any = useMainStore()  // 获取pina
const checkedValueRef = ref<string | null>(null)
let checkedValue = ref('有效')
const drags = ref()
const emit = defineEmits(['closeAlarm', 'openThreeP'])
/**
 * radio 点击事件
 * @param e 点击处理
 */
const handleChange = (e: any) => {
  // console.log('e', e.target.value)
  checkedValueRef.value = e.target.value
  checkedValue.value = checkedValueRef.value
  // console.log('checkedValue', checkedValue.value, checkedValueRef.value)
}

/**
 * 鼠标拖动事件
 */
const moudedown = (ev: any) => {
  console.log('ev', ev)
  let e = ev || event;
  let x = e.clientX - drags.value.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离
  let y = e.clientY - drags.value.offsetTop; //鼠标点击坐标距离盒子上边缘的距离

  document.onmousemove = function (ev) {
    let e = ev || event;
    drags.value.style.left = ev.clientX - x + 'px';
    drags.value.style.top = ev.clientY - y + 'px';

    let bodyScreenX = ev.screenX
    let bodyClientWidth = document.body.clientWidth

    document.onmouseup = function (ev) {
      if (ev.clientX - x < 0) {
        drags.value.style.left = 0
      } else if (bodyScreenX > bodyClientWidth) {
        drags.value.style.right = 0
        drags.value.style.left = bodyClientWidth - 100 + 'px'
      }
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
}

/**
 * 关闭弹窗
 */
const closePop = () => {
  emit('closeAlarm')
}

/**
 * 添加人员按钮
 */
const addPeople = () => {
  emit('closeAlarm')
  emit('openThreeP')
}

/**
 * 取消按钮
 */
const onCloseAlarm = () => {
  emit('closeAlarm')
}

/**
 * 确定按钮
 */
const sureAlarm = () => {
  emit('closeAlarm')
}
</script>

<style lang="scss" scoped>
.leftPop {
  position: absolute;
  width: 300px;
  // height: 200px;
  // border: 1px solid red;
  // margin-left: 450px;
  transform: translateX(450px);
  z-index: 17;
  // background-color: rgba(36, 85, 132, 0.6);
  background-image: url("../../assets/border/Group4900.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 10px 5px;

  .top {

    // border: 1px solid red;
    .top_1 {
      // font-size: ;
      color: #fff;
      // border: 1px solid rgb(45, 12, 12);
      font-weight: bold;
      position: relative;

      .left_icon {
        // border: 1px solid red;
        position: absolute;
        right: 0;
        top: 2px;
        height: 20px;
        margin: 0;
        padding: 0;
        cursor: pointer;
      }
    }
  }

  .center {
    border: 1px solid rgb(220, 221, 222);
    margin-top: 10px;
  }

  .radioStyle {
    margin-top: 10px;
    // border: 1px solid red;
    display: flex;
    color: #3F91E5;

    .radioStyle_2 {
      margin-left: 20px;
    }
  }

  .handlePeo {
    // margin:;
    margin-top: 10px;
    border: 1px solid;
    display: flex;
    border: transparent;
    color: #3F91E5;

    .handlePeo_1 {
      margin-left: 20px;
      outline: none;
      border: none;
      border-radius: 5px;
      padding: 3px 30px;
      color: #fff;
      background-image: url("../../assets/border/Group3037.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      // background-color: #3F91E5;
      cursor: pointer;
    }
  }

  .tableStyle {
    margin-top: 10px;
    border: 1px solid #3F91E5;
    border-collapse: collapse;

    tr {
      th {
        padding: 3px 5px;
        color: #3F91E5;
      }

      td {
        padding: 3px 5px;
      }
    }
  }

  .bottomStyle {
    margin-top: 10px;
    display: flex;
    justify-content: center;

    .bottomStyle_1 {
      outline: none;
      border: none;
      border-radius: 5px;
      padding: 3px 30px;
      // color: #3F91E5;
      color: #fff;
      // background-color: #fff;
      background-image: url("../../assets/border/Group3037.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-right: 5px;
      cursor: pointer;
    }

    .bottomStyle_2 {
      outline: none;
      border: none;
      border-radius: 5px;
      padding: 3px 30px;
      color: #fff;
      // background-image: url("../../assets/border/Group3037.png");
      background-image: url("../../assets/border/Group3038.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-left: 5px;
      cursor: pointer;
    }
  }
}
</style>